<script setup>
import { useRoute } from 'vue-router'
import { getCategoryAPI } from '@/api/home.js'
import { ref } from 'vue'
const category = ref()
const route = useRoute()
const id = ref(route.params.id)
const getCategory = async () => {
  const res = await getCategoryAPI(id.value)
  category.value = res.data.result
}
getCategory()
</script>
<template>
  <div class="buy">
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ category?.name }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="mainImg center">{{ category?.name }}</div>
    <!-- 全部分类 -->
    <div class="center">
      <h2 class="font" style="text-align: center">全部分类</h2>
      <div class="totalCategory center">
        <router-link
          :to="`/category/${item.id}`"
          v-for="(item, index) in category?.children"
          :key="item.id"
          class="total categoryName routerlink"
        >
          <el-image :src="category?.children[index].picture" class="totalImg" />
          <p>{{ category?.children[index].name }}</p>
        </router-link>
      </div>
    </div>

    <!-- 每一个分类 -->
    <div
      style="margin: 0 auto"
      v-for="i in category?.children"
      :key="i.id"
      class="every everyCenter"
    >
      <p class="font" style="padding-top: 10px">
        ⭐{{ i.name }}⭐
        <router-link
          :to="`/category/${i.id}`"
          style="
            font-size: 12px;
            font-weight: normal;
            margin-left: 750px;
            font-family: '小可奶酪体';
            text-decoration: none;
            color: #695e45;
            position: absolute;
            right: 10%;
          "
          >查看全部>>></router-link
        >
      </p>

      <div class="everyone">
        <router-link
          v-for="item in i?.goods"
          :key="item.id"
          class="everyValue routerlink"
          :to="`/detail/${item.id}`"
        >
          <el-image :src="item?.picture" style="height: 200px" />
          <p>{{ item?.name }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.routerlink {
  text-decoration: none;
  color: black;
}
.everyone {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  font-family: '小可奶酪体';
  .everyValue {
    margin: 0 15px;
  }
}
.every:nth-child(2n + 1) {
  background-color: #f9f4dc;
}
.categoryName {
  font-family: 'yufan';
}
.everyCenter {
  margin: 10px auto;
  text-align: center;
}
.center {
  width: 90%;
  margin: 10px auto;
  text-align: center;
}
.totalCategory {
  padding: 15px 20px;
  background-color: #eef7f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .totalImg {
    height: 80px;
  }
  .total {
    margin: 0 6px;
    text-align: center;
  }
}
.font {
  font-family: '像素字体';
}
.buy {
  width: 100%;
}
.mainImg {
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
  font-family: '素材集市';
  background-image: url('/assets/分类背景.jpg');
  background-size: contain;
}
</style>
